<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body>

    <div id="a"></div>

    <script>

        const get = el => document.querySelector(el);

        const getCss = (ele, prop) => parseInt(getComputedStyle(oDiv)[prop]);


        const setCss = (ele, options) => {
            for (let prop in options) {
                // ele.style.left = '100px'
                ele.style[prop] = options[prop];
            }
        }

        // 1000

        const oDiv = get('div');

        // // 匀速运动   -- 正向运动
        // let cur = getCss(oDiv, 'left');
        // console.log(cur);
        // let speed = 20;
        // let t = setInterval(() => {
        //     cur += speed;
        //     setCss(oDiv, {
        //         left: cur + 'px'
        //     });
        //     if (cur >= 1010) {
        //         clearInterval(t);
        //         setCss(oDiv, {
        //             left: 1010 + 'px'
        //         });
        //     }
        // }, 20)



        // 匀速运动   -- 正向运动
        // let cur = getCss(oDiv, 'left');
        // console.log(cur);
        // let speed = -20;
        // let t = setInterval(() => {
        //     cur += speed ;
        //     setCss(oDiv, {
        //         left: cur + 'px'
        //     });
        //     if(cur <= 0) {
        //         clearInterval(t);
        //         setCss(oDiv, {
        //             left: 0 + 'px'
        //         });
        //     }
        // }, 20)

        // move(1003)

        move({
            ele: oDiv,
            end: 1003,
            prop: 'left',
            speed: 30,
            cb: function () {
                move({
                    ele: oDiv,
                    end: 0,
                    prop: 'left',
                    speed: 30,
                })
            }
        })

        function move(options) {
            let { ele, speed, end, prop, cb } = options;
            let cur = getCss(ele, prop);
            console.log(cur);
            speed = end > cur ? speed : -speed;
            let t = setInterval(() => {
                cur += speed;
                setCss(ele, {
                    [prop]: cur + 'px'
                });

                if (Math.abs(end - cur) < Math.abs(speed)) {
                    clearInterval(t);
                    setCss(ele, {
                        [prop]: end + 'px'
                    });
                    cb && cb()
                }
            }, 20)
        }

    </script>

</body>

</html>